<template>
  <!-- <div class="home">
    <HomeLeft class="home-left"></HomeLeft>
    <HomeCon class="home-con" :formData.sync="formData" :selectedSubassembly="selectedSubassembly"></HomeCon>
    <HomeRight :selectedSubassembly="selectedSubassembly" class="home-right" :formData="formData"></HomeRight>
  </div> -->
  <!-- :preview="false" -->
  <NgFormDesign  :template.sync="template" :config="formConfig" :basic-item="basicItem"
    :decorate-item="decorateItem" :layout-item="layoutItem" :application-item="applicationItem"></NgFormDesign>
</template>


<script>
// import HomeLeft from '@/components/HomeLeft'
// import HomeCon from '@/components/HomeCon'
// import HomeRight from '@/components/HomeRight'
import { mapGetters } from 'vuex'
import { iframeDispose } from '@/utils/iframeMeans.js'
import { NgFormDesign } from '@/components/packages/index.js'
export default {
  components: {
    // HomeLeft, HomeCon, HomeRight,
    NgFormDesign
  },
  data() {
    return {
      formConfig: {},
      template: {
        list: [],
        config: {
          labelPosition: "left",
          labelWidth: 100,
          size: 'mini',
          outputHidden: true,
          hideRequiredMark: false,
          syncLabelRequired: false,
          customStyle: ""
        }
      },
      basicItem: [
        "input",          //输入框
        "textarea",       //文本框
        "number",         //数字输入框
        "select",         //下拉选择器
        "checkbox",       //多选框
        "radio",          //单选框
        "date",           //日期
        "daterange",      //日期区间
        "time",           //时间
        "datePicker",     //日期时间
        // "rate",        //评分
        "slider",         //滑动输入条
        // "cascader",    //级联选择器
        "switch",         //开关
        // "batch",       //动态表格
        // "uploadImg",   //上传图片
        // "uploadFile",  //上传文件
      ],
      decorateItem: [
        "text",     // 标签
        "html",     // HTML
        "divider",  // 分割线
        // "alert",    // 提示
      ],
      layoutItem: [
        "table",         // 表格布局
        // "controller",    // 容器
        // "grid",          // 栅格布局
        // "tabs",          // 选项卡
      ],
      applicationItem: [
        // 'state',  // 区域选择
      ]

      // formData: {
      //   formList: [],
      //   formConfig: {
      //     labelPosition: 'left',
      //     size: "small",
      //     form: {}
      //   }
      // },
      // selectedSubassembly: {}
    }
  },
  // provide() {
  //   return {
  //     // setSelectedSubassembly: this.setSelectedSubassembly
  //   }
  // },
  watch: {
    //   formData: {
    //     deep: true,
    //     handler(newData) {
    //       this.$nextTick(() => {
    //         if (!this.isIframe) return
    //         window.parent.postMessage({
    //           type: 'setFormData',
    //           formData: JSON.stringify(newData),
    //         }, '*')
    //       })
    //     }
    //   },
    //   selectedSubassembly: {
    //     deep: true,
    //     handler() {
    //       console.log('selectedSubassembly', this.selectedSubassembly);
    //     }
    //   },
    template: {
      deep: true,
      handler(newData) {
        this.$nextTick(() => {
          if (!this.isIframe) return
          window.parent.postMessage({
            type: 'setFormData',
            formData: JSON.stringify(newData),
          }, '*')
        })
      }
    }
  },
  computed: {
    ...mapGetters(['isIframe'])
  },
  created() { },
  mounted() {
    if (!this.isIframe) return
    window.addEventListener('message', async (e) => {
      iframeDispose(e.data, this.template)
    }, false)
  },
  methods: {
    // setSelectedSubassembly(selectedSubassembly) {
    //   console.log(53, selectedSubassembly);
    //   this.selectedSubassembly = selectedSubassembly
    // }
  },
}
</script>

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;

  .home-left {
    width: 260px;
    height: 100%;
    overflow-y: auto;
  }

  .home-con {
    flex: 1;
    height: 100%;
    background-color: #f5f6f8;
    overflow-y: auto;
  }

  .home-right {
    width: 260px;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
